<!-- 游戏配置 -->
<template>
  <SearchTable :query="data.query" :list="data.list" :total="data.total" @changeSize="changeSize"
    @changePage="changePage" @search="getSearchList" @changeTh="data.dialogVisible = true">
    <template #other>
      <el-tabs v-model="data.gameType" type="card" class="demo-tabs" @tab-change="handleClick">
        <el-tab-pane v-for="item in GAMETYPE" :label="item.label + $t('381')" :name="item.value" />
      </el-tabs>
    </template>
    <template #form>
      <GameItem ref="GameItemRef" @query="queryGame" />
    </template>
    <template #button>
      <el-button v-show="data.gameType == 1 ? true : false" type="danger"
        @click="data.isRtpShow = true">{{ t('631') }}</el-button>
      <el-button type="danger" @click="data.isShowMaintain = true">{{ t('803') }}</el-button>
    </template>
    <template #table>
      <template v-for="(item, index) in data.fields" :key="index">
        <el-table-column v-if="item.visible" :prop="item.prop" :label="item.label" :width="item.width"
          show-overflow-tooltip>
          <template #header>
            <el-tooltip v-if="item.tips" effect="dark" placement="top">
              <template #content> {{ item.tips }} </template>
              <el-icon class="ques-tips">
                <QuestionFilled />
              </el-icon>
            </el-tooltip>
            {{ item.label }}
          </template>
          <template v-if="item.prop == 'game_type'" #default="scope">
            <el-tag>{{ selectToLabel(GAMETYPE, scope.row.game_type) }}</el-tag>
          </template>
          <template v-if="item.prop == 'show'" #default="scope">
            <el-tag :type="scope.row.show ? 'success' : 'danger'">{{
              selectToLabel(DEMOPLAY, scope.row.show)
            }}</el-tag>
          </template>
          <template v-if="item.prop == 'game_name'" #default="scope">
            <GameHeaderInfo :game_id="scope.row.game_id" :class="data.gameType != 1 ? 'paddingLeft42' : ''"/>
          </template>
          <template v-if="item.prop == 'status'" #default="scope">
            <el-tag :type="scope.row.status ? 'primary' : 'danger'">
              {{ selectToLabel(DEMOPLAY, scope.row.status) }}
            </el-tag>
          </template>
          <template v-if="item.prop == 'a_slots_backend_echo'" #default="scope">
            {{ BigHundred(scope.row.pg_game.a_slots_backend_echo) }}%
          </template>
          <template v-if="item.prop == 'a_slots_rtptype'" #default="scope">
            <el-tag>{{ scope.row.pg_game.a_slots_rtptype ? selectToLabel(RtpType, scope.row.pg_game.a_slots_rtptype) :
              '-'}}</el-tag>
          </template>
          <template v-if="item.prop == 'a_slots_auto'" #default="scope">
            <span v-if="scope.row.pg_game.a_slots_auto == -1 ? true : false">-</span>
            <el-tag v-else :type="scope.row.pg_game.a_slots_auto ? 'danger' : 'success'">{{
              scope.row.pg_game.a_slots_auto ? t('102') : t('101') }}</el-tag>
          </template>
          <template v-if="item.prop == 'a_slots_maxwin'" #default="scope">
            {{ scope.row.pg_game.a_slots_maxwin }}
          </template>
          <template v-if="item.prop == 'a_slots_amount'" #default="scope">
            <span v-for="(second, two) in scope.row.amount" :key="two">{{ second }}
              <span v-if="two != scope.row.amount.length - 1">,</span>
            </span>
          </template>
        </el-table-column>
      </template>
      <el-table-column :label="t('803')" width="115" align="center">
        <template #header>
          <el-tooltip effect="dark" :content="t('807')" placement="top">
            <el-icon class="ques-tips">
              <QuestionFilled />
            </el-icon>
          </el-tooltip>
          {{ t('803') }}
        </template>
        <template #default="scope">
          <el-button :type="scope.row.status ? 'danger' : 'success'" size="small" @click="handleChange(scope.row)">
            {{ scope.row.status ? t('803') : t('805') }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column fixed="right" :label="$t('97')" :width="data.gameType == 2 ? 280 : 150">
        <template #default="scope">
          <div class="flex">
            <el-button type="danger"
              v-if="data.gameType == 2 && scope.row.game_id == 100003 || scope.row.game_id == 100002 ? true : false"
              size="small" @click="checkDetails(scope.row, 'control')">
              {{ $t('525') }}
            </el-button>
            <div style="width: 72px;height: 36px;margin-left: 12px;"
              v-if="data.gameType == 2 && scope.row.game_id != 100003 && scope.row.game_id != 100002 ? true : false">
            </div>
            <el-button type="success" size="small" @click="checkDetails(scope.row, 'check')">
              {{ $t('47') }}
            </el-button>
            <el-button :disabled="scope.row.platform_backend_echo == 6 && scope.row.status?true:false" :type="disabledGame(scope.row) && scope.row.status?'info':'warning'" size="small" @click="checkDetails(scope.row, 'edit')">
              {{ $t('98') }}
            </el-button>
          </div>
        </template>
      </el-table-column>
    </template>
  </SearchTable>

  <!-- 变更表头弹框 -->
  <tableHeader :dialogVisible="data.dialogVisible" :list="data.fields" @cancel="data.dialogVisible = false"
    @resetData="resetData"></tableHeader>

  <!-- 游戏配置 -->
  <Config :show="data.isShowDetails" :isDisableUser="data.isDisableUser" :type="data.query.game_type"
    :checkedItem="data.checkedItem" @onHideDetails="onHideDetails" />

  <!-- 群控配置 -->
  <ControlLuckWin :show="data.isShowControlLuckWin" :checkedItem="data.checkedItem" @onHideDetails="onHideDetails" />
  <ControlBattleRoyale :show="data.isShowControlBattleRoyale" :checkedItem="data.checkedItem"
    @onHideDetails="onHideDetails" />

  <!-- 游戏RTP设置 -->
  <el-dialog v-model="data.isRtpShow" :title="t('375')" :close-on-click-modal="false" :close-on-press-escape="false"
    top="25vh" @close="onHideDetails">
    <form-item :title="t('36')" :pass="true" value="game_id" v-if="data.gameType ? true : false">
      <el-select class="imWidth100" v-model="data.queryDetails.game_ids" :placeholder="t('340') + t('36')" filterable
        multiple @change="chooseGame">
        <el-option :label="t('21')" :value="-1" />
        <el-option v-for="(item, index) in indexStore.gameArray" :key="index"
          :label="'【' + item.value + '】' + GameName(indexStore.gameArray, item.value)" :value="item.value"
          v-show="item.type == 1 ? true : false" />
      </el-select>
    </form-item>
    <form-item :title="t('375')" :pass="true" value="a_slots_backend_echo">
      <el-select v-model="data.queryDetails.a_slots_backend_echo" :placeholder="t('340')" filterable>
        <el-option v-for="item in data.rtpShowList" :label="item + '%'" :value="item"
          v-show="item && item == 200 ? data.agentTypeShow : true" />
      </el-select>
    </form-item>
    <form-item :title="t('564')" :pass="true" value="a_slots_rtptype">
      <el-select v-model="data.queryDetails.a_slots_rtptype" :placeholder="t('340')" filterable>
        <el-option v-for="item in RtpType" :label="item.label" :value="item.value" />
      </el-select>
    </form-item>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="info" @click="onHideDetails">{{ t('240') }}</el-button>
        <el-button icon="CircleCheck" type="primary" size="small" @click="maintainGame">{{ t('241') }}</el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 批量维护游戏 -->
  <el-dialog v-model="data.isShowMaintain" :title="t('803')" :close-on-click-modal="false"
    :close-on-press-escape="false" top="25vh" @close="onHideDetails">
    <form-item :title="t('247')" value="status">
      <el-radio-group v-model="data.queryDetails.status" size="large">
        <el-radio-button :label="t('804')" :value="0" />
        <el-radio-button :label="t('805')" :value="1" />
      </el-radio-group>
    </form-item>
    <form-item :title="t('36')" :pass="true" value="game_id" v-if="data.gameType ? true : false">
      <el-select class="imWidth100" v-model="data.queryDetails.game_ids" :placeholder="t('340') + t('36')" filterable
        multiple @change="chooseGame">
        <el-option :label="t('21')" :value="-1" />
        <el-option v-for="(item, index) in indexStore.gameArray" :key="index"
          :label="'【' + item.value + '】' + GameName(indexStore.gameArray, item.value)" :value="item.value"
          v-show="item.type == data.gameType?true:false" />
      </el-select>
    </form-item>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="info" @click="onHideDetails">{{ t('240') }}</el-button>
        <el-button icon="CircleCheck" type="primary" size="small" @click="maintainGame">{{ t('241') }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import tableHeader from '@/components/tableHeader/tableHeader.vue'
import SearchTable from '@/components/SearchTable/SearchTable.vue'
import GameItem, { type GameType } from '@/components/FormItem/GameItem.vue'
import GameHeaderInfo from '@/components/FormItem/GameHeaderInfo.vue'
import FormItem from '@/components/FormItem/FormItem.vue'
import Config from './gameConfig/config.vue'
import ControlLuckWin from './gameConfig/ControlLuckWin.vue'
import ControlBattleRoyale from './gameConfig/ControlBattleRoyale.vue'
import { getGameConfigList, editGame, editMaintainGame, editAgentMaintainGame, editRtpGame } from '@/api/settion'
import { GAMETYPE, DEMOPLAY, RtpType } from '@/config/eunm'
import { selectToLabel, setSemicolonToArr, GamePlatform, GamePlatformDisabled, setCommaToArr, GameName } from '@/utils/index'
import { BigHundred, BigWan, BigTimeHundred } from '@/utils/math'

import { useStore } from '@/stores/index'
const indexStore = useStore()
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

const data = reactive({
  query: {
    page: 1,
    size: 50,
    game_type: 1,
    game_id: -1,
    platform: -1,
  },
  gameType: 1,
  list: [],
  total: 0,
  fields: [
    { label: t('1026'), prop: 'game_id', width: '100', visible: true, tips: t('1027') },
    { label: t('36'), prop: 'game_name', width: '200', visible: true, tips: t('541') },
    { label: t('1024'), prop: 'game_name_en', width: '150', visible: true, tips: t('1025') },
    { label: t('62'), prop: 'game_type', width: '120', visible: true, tips: t('542') },
    { label: t('20'), prop: 'status', width: '120', visible: true, tips: t('247') },
    { label: t('375'), prop: 'a_slots_backend_echo', width: '140', visible: true, tips: t('546') },
    { label: t('564'), prop: 'a_slots_rtptype', width: '120', visible: true, tips: t('565') },
    { label: t('391'), prop: 'a_slots_auto', width: '150', visible: true, tips: t('547') },
    { label: t('477'), prop: 'a_slots_maxwin', width: '120', visible: true, tips: t('548') },
    { label: t('478'), prop: 'a_slots_amount', width: '', visible: true, tips: t('549') },
  ],
  dialogVisible: false, // 设置表头弹框
  isShowDetails: false, // 详情
  isDisableUser: false, // 查看
  isShowControlLuckWin: false,
  isShowControlBattleRoyale: false,
  isShowMaintain: false, // 批量维护
  isRtpShow: false, // RTP群控设置
  rowIds: {
    id: 0, // 飞机 id 
    type: 0, //查看1 或者编辑0
    agent_id: 0, // 商户id
    game_id: 0, // 游戏id
    game_name: '', // 游戏名称
  },
  queryDetails: {
    game_ids: [],
    a_slots_backend_echo: 70,
    a_slots_rtptype: 1,
    status: 0
  },
  rtpShowList: [] as any[],
  checkedItem: {} as any,
  agentTypeShow: JSON.parse(localStorage.getItem('userInfo') as string).agent_type ? true : false,
})

// 游戏品牌 + 游戏
const queryGame = (item: GameType) => {
  data.query.platform = item.platform
  data.query.game_id = item.game_id
}

onMounted(async () => {
  getSearchList()
  GameItemRef.value.getGameType(1)
})

const GameItemRef = ref<any>()
const handleClick = async () => {
  data.query.game_type = data.gameType
  data.query.game_id = -1
  data.query.platform = -1
  data.list = []
  if (data.gameType == 1) {
    data.fields = [
      { label: t('1026'), prop: 'game_id', width: '100', visible: true, tips: t('1027') },
      { label: t('36'), prop: 'game_name', width: '200', visible: true, tips: t('541') },
      { label: t('1024'), prop: 'game_name_en', width: '150', visible: true, tips: t('1025') },
      { label: t('62'), prop: 'game_type', width: '120', visible: true, tips: t('542') },
      { label: t('20'), prop: 'status', width: '120', visible: true, tips: t('247') },
      { label: t('375'), prop: 'a_slots_backend_echo', width: '140', visible: true, tips: t('546') },
      { label: t('564'), prop: 'a_slots_rtptype', width: '120', visible: true, tips: t('565') },
      { label: t('391'), prop: 'a_slots_auto', width: '150', visible: true, tips: t('547') },
      { label: t('477'), prop: 'a_slots_maxwin', width: '120', visible: true, tips: t('548') },
      { label: t('478'), prop: 'a_slots_amount', width: '', visible: true, tips: t('549') },
    ]
  } else {
    data.fields = [
    { label: t('1026'), prop: 'game_id', width: '100', visible: true, tips: t('1027') },
    { label: t('36'), prop: 'game_name', width: '', visible: true, tips: t('541') },
    { label: t('1024'), prop: 'game_name_en', width: '150', visible: true, tips: t('1025') },
    { label: t('62'), prop: 'game_type', width: '', visible: true, tips: t('542') },
    ]
  }
  GameItemRef.value.onHideDetails(data.gameType)
  onHideDetails(true)
}

const getSearchList = async () => {
  let query = JSON.parse(JSON.stringify(data.query));
  indexStore.setPageLoading(true)
  if (query.platform == -1) {
    query.platform = ''
  }
  let res = await getGameConfigList(query)
  res.data?.list?.forEach((item: any, index: number) => {
    item.amount = setArrBetFace(item.pg_game.a_slots_amount)
    if (item.game_id == 100004) {
      res.data?.list.splice(index, 1,)
    }
  })
  indexStore.setPageLoading(false)
  data.list = res.data.list
  data.total = res.data.total
  // 展示rtp
  data.rtpShowList = setStrRtpShow(res.data?.list[0]?.pg_game?.a_slots_rtpshow)
}

// 选择全部游戏
const chooseGame = async (row: any) => {
  const all = row.find((item: number) => item == -1)
  if (all) {
    data.queryDetails.game_ids = [-1] as any
  } else {
    data.queryDetails.game_ids = row
  }
}
// RTP设置
const maintainGame = async () => {
  let query = JSON.parse(JSON.stringify(data.queryDetails)),mineGameId=[] as any[],gameId=[] as any[];
  // 选择全部
  const allGame = data.queryDetails.game_ids.find((item: number) => item == -1)
  if (allGame) {
    query.game_ids = []
    indexStore.gameArray.forEach((item: any) => {
      if(item.type==data.gameType){
        query.game_ids.push(item.value)
      }
    })
  }
  if (!query.game_ids.length) {
    return ElMessage.error(t('340') + t('36'))
  }
  if (query.game_ids.length == 1 && query.game_ids[0] == -1 && query.isShowMaintain) {
    return ElMessage.error(t('806') + selectToLabel(DEMOPLAY, query.status) + t('36'))
  }
  query.column = 'a_slots_backend_echo'
  query.column_value = JSON.stringify(BigTimeHundred(query.a_slots_backend_echo))
  query.agent_ids = [JSON.parse(localStorage.getItem('userInfo') as string).id]
  // MineGame的游戏ID
  query.game_ids.forEach((id:number,index:number)=> {
    if(id>10000000){
      mineGameId.push(id)
    }else{
      gameId.push(id)
    }
  })
  query.game_ids = gameId
  data.isShowMaintain ? await editMaintainGame(query) : await editRtpGame({
    agent_ids: [JSON.parse(localStorage.getItem('userInfo') as string).id],
    game_ids: query.game_ids,
    column_data: [
      { column: 'a_slots_backend_echo', column_value: JSON.stringify(BigTimeHundred(query.a_slots_backend_echo)) },
      { column: 'a_slots_rtptype', column_value: JSON.stringify(query.a_slots_rtptype) },
    ]
  })
  if(mineGameId.length && data.isShowMaintain && data.gameType == 4){
    await editAgentMaintainGame({
      gamelist: mineGameId,
      maintain: !query.status?[JSON.parse(localStorage.getItem('userInfo') as string).id]:[],
      running: query.status?[JSON.parse(localStorage.getItem('userInfo') as string).id]:[],
    })
  }
  ElMessage.success(t('342'))
  onHideDetails(false)
  getSearchList()
}
const setStrRtpShow = (str: any) => {
  let arr = [], newArr: any[] = [];
  arr = setCommaToArr(str)
  arr.forEach((item: any) => {
    newArr.push(BigHundred(item))
  })
  return newArr
}

// 开启-关闭
const handleChange = (row: { test_account: string; status: number; game_id: number; agent_id: number }) => {
  let msg = row.status == 1 ? '确认是否关闭游戏？' : '确认是否开启游戏？',
    dataRow = JSON.parse(JSON.stringify(row));
  ElMessageBox.confirm(msg, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  }).then(async () => {
    dataRow.status = dataRow.status ? 0 : 1
    if(row.game_id>10000000){
      await editAgentMaintainGame({
        gamelist: [row.game_id],
        maintain: !dataRow.status?[row.agent_id]:[],
        running: dataRow.status?[row.agent_id]:[],
      })
    }else{
      await editGame(dataRow)
    }
    ElMessage.success('操作成功')
    getSearchList()
  }).catch(() => { })
}

// 详情
const checkDetails = async (row: any, type: string) => {
  if (type == 'control') {
    if (row.game_id == 100002) {
      data.isShowControlBattleRoyale = true
    }
    if (row.game_id == 100003) {
      data.isShowControlLuckWin = true
    }
  } else {
    if (type == 'check') {
      data.isDisableUser = true
    } else {
      data.isDisableUser = false
    }
    data.isShowDetails = true
  }
  Object.assign(data.checkedItem, row)
}

const setArrBetFace = (str: string) => {
  let arr = [], newArr = [] as any[]
  arr = setSemicolonToArr(str)
  arr[0]?.forEach((item: any) => {
    newArr.push(BigWan(item))
  })
  return newArr
}

// 控制游戏封禁按钮
const disabledGame = (row: any) => {
  if(GamePlatform(indexStore.gameArray,row.game_id) == 'MiniGame' && row.status ||  GamePlatformDisabled(indexStore.gameArray,row.game_id)){
    return true
  }else{
    return false
  }
}

// 修改页数
const changePage = (val: number) => {
  data.query.page = val
  getSearchList()
}
const changeSize = (val: number) => {
  data.query.size = val
}

// 重置表头
const resetData = (val: any) => {
  data.fields = val
}

// 重置
const onHideDetails = (show: boolean) => {
  data.isShowDetails = false
  data.isDisableUser = false
  data.dialogVisible = false
  data.isShowControlLuckWin = false
  data.isShowControlBattleRoyale = false
  data.isShowMaintain = false
  data.isRtpShow = false
  data.queryDetails = {
    game_ids: [],
    a_slots_backend_echo: 70,
    a_slots_rtptype: 1,
    status: 0,
  }
  if (show) {
    data.query = {
      page: 1,
      size: 50,
      game_type: data.gameType,
      game_id: data.query.game_id,
      platform: data.query.platform,
    }
    getSearchList()
  }
}
</script>

<style scoped lang="scss">
.paddingLeft42 {
  padding-left: 40%;
}
</style>
